<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日一题</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #f8f9fa;
            --accent-color: #3498db;
            --text-color: #333;
            --light-text: #7f8c8d;
            --border-color: #ecf0f1;
            --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            --code-bg: #f3f3f3;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: var(--text-color);
            line-height: 1.6;
            height: 100vh;
            padding: 10px;
            display: flex;
            justify-content: center;
        }

        .app-container {
            max-width: 900px;
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .header {
            text-align: center;
            margin-bottom: 20px;
            color: var(--primary-color);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

        .header h1 {
            font-size: 1.8rem;
            font-weight: 600;
        }

        .control-panel {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.2s ease;
        }

        .draw-btn {
            background-color: var(--primary-color);
            color: white;
        }

        .draw-btn:hover {
            background-color: #1a252f;
        }

        .card-container {
            display: flex;
            flex-direction: column;
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--card-shadow);
            border: 1px solid var(--border-color);
            flex: 1;
        }

        .question-card {
            display: flex;
            flex-direction: column;
            padding: 25px;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .question-number {
            font-weight: bold;
            color: var(--primary-color);
            font-size: 1.1rem;
        }

        .question-content {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 20px;
            white-space: pre-line;
        }

        .answer-section {
            background-color: var(--secondary-color);
            padding: 20px;
            border-radius: 6px;
            margin-bottom: 15px;
            border-left: 4px solid var(--accent-color);
        }

        .answer-header {
            margin-bottom: 10px;
            color: var(--accent-color);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .answer-content {
            font-size: 1rem;
            color: var(--text-color);
            line-height: 1.8;
            white-space: pre-line;
        }

        .btn-group {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
        }

        .show-answer-btn {
            background-color: white;
            color: var(--accent-color);
            padding: 10px 20px;
            border: 1px solid var(--accent-color);
        }

        .show-answer-btn:hover {
            background-color: var(--accent-color);
            color: white;
        }

        .hide-answer-btn {
            background-color: var(--accent-color);
            color: white;
            padding: 10px 20px;
        }

        .hide-answer-btn:hover {
            background-color: #2980b9;
        }

        .hidden {
            display: none;
        }

        .stats {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 15px;
            font-size: 0.9rem;
        }

        .stat-box {
            display: flex;
            align-items: center;
            gap: 8px;
            background-color: white;
            padding: 8px 16px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            color: var(--light-text);
        }

        @font-face {
            font-family: 'MapleMono';
            src: url('./font/MapleMono-Regular.ttf.woff2') format('woff');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        /* 更新代码块样式以匹配highlight.js */
        pre code.hljs {
            display: block;
            overflow-x: auto;
            padding: 1em;
            background: var(--code-bg);
            border-radius: 6px;
            font-size: 14px;
            font-family: 'MapleMono', Arial, sans-serif;
            line-height: 1.5;
            margin: 15px 0;
            white-space: pre-wrap;
            word-break: break-word;
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 1.5rem;
            }

            .question-card {
                padding: 20px;
            }

            .question-content,
            .answer-content {
                font-size: 1rem;
            }
        }
    </style>
</head>

<body>
    <div class="app-container">
        <div class="header">
            <i class="fas fa-code"></i>
            <h1>每日一题</h1>
        </div>

        <div class="control-panel">
            <button id="draw-btn" class="btn draw-btn">
                <i class="fas fa-random"></i> 随机抽题
            </button>
        </div>

        <div class="card-container">
            <div class="question-card" id="question-card">
                <div class="card-header">
                    <span class="question-number" id="question-number">题目 #1</span>
                </div>
                <div class="question-content" id="question-content"></div>
                <div class="answer-section hidden" id="answer-section">
                    <div class="answer-header">
                        <i class="fas fa-lightbulb"></i> 参考答案
                    </div>
                    <div class="answer-content" id="answer-content"></div>
                </div>
                <div class="btn-group">
                    <button id="show-answer-btn" class="btn show-answer-btn">
                        <i class="fas fa-eye"></i> 查看答案
                    </button>
                    <button id="hide-answer-btn" class="btn hide-answer-btn hidden">
                        <i class="fas fa-eye-slash"></i> 隐藏答案
                    </button>
                </div>
            </div>
        </div>

        <div class="stats">
            <div class="stat-box">
                <i class="fas fa-database"></i>
                <span>题库: <span id="total-questions">0</span></span>
            </div>
            <div class="stat-box">
                <i class="fas fa-check-circle"></i>
                <span>已答: <span id="answered">0</span></span>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/xml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.4/beautify.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.4/beautify-css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.4/beautify-html.min.js"></script>

    <script type="module">
        import { question_data } from './data.mjs';
        const questionBank = question_data;

        const drawBtn = document.getElementById('draw-btn');
        const questionCard = document.getElementById('question-card');
        const questionNumber = document.getElementById('question-number');
        const questionContent = document.getElementById('question-content');
        const answerSection = document.getElementById('answer-section');
        const answerContent = document.getElementById('answer-content');
        const showAnswerBtn = document.getElementById('show-answer-btn');
        const hideAnswerBtn = document.getElementById('hide-answer-btn');
        const totalQuestionsEl = document.getElementById('total-questions');
        const answeredEl = document.getElementById('answered');

        // 状态变量
        let currentQuestion = null;
        let answeredCount = 0;
        let totalQuestions = questionBank.length;
        let answeredQuestions = new Set();

        // 转义HTML特殊字符
        function escapeHtmlSymbol(str) {
            return str.replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }

        // 格式化代码
        function formatCode(code, language) {
            let formatted = code;
            // 根据语言选择格式化方式
            switch (language) {
                case 'javascript':
                    formatted = js_beautify(code, { indent_size: 2, space_in_empty_paren: true });
                    break;
                case 'css':
                    formatted = css_beautify(code, { indent_size: 2 });
                    break;
                case 'html':
                    formatted = html_beautify(code, { indent_size: 2 });
                    break;
                default:
                    // 默认使用JavaScript格式化
                    formatted = js_beautify(code, { indent_size: 2 });
            }
            return escapeHtmlSymbol(formatted);
        }

        // 处理Markdown格式的代码块
        function processCodeBlocks(text) {
            // 替换 ```language 格式的代码块
            return text.replace(/```(\w+)?\n([\s\S]+?)\n```/g,
                (match, language, code) => {
                    language = language || 'javascript';
                    const formattedCode = formatCode(code, language);
                    return `<pre><code class="language-${language} hljs">${formattedCode}</code></pre>`;
                });
        }

        // 初始化
        function init() {
            // 更新统计信息
            updateStats();

            // 事件监听器
            drawBtn.addEventListener('click', drawRandomQuestion);
            showAnswerBtn.addEventListener('click', showAnswer);
            hideAnswerBtn.addEventListener('click', hideAnswer);

            // 显示题库总数
            totalQuestionsEl.textContent = totalQuestions;

            // 初始加载一个题目
            drawRandomQuestion();
        }

        // 随机抽题
        function drawRandomQuestion() {
            // 如果所有题目都已答过，重置记录
            if (answeredQuestions.size === totalQuestions) {
                if (confirm('所有题目都已答过，是否重新开始？')) {
                    answeredQuestions.clear();
                    answeredCount = 0;
                    updateStats();
                } else {
                    return;
                }
            }

            // 过滤未答过的题目
            let availableQuestions = questionBank.filter(
                q => !answeredQuestions.has(q.id)
            );

            // 随机选择一个问题
            const randomIndex = Math.floor(Math.random() * availableQuestions.length);
            currentQuestion = availableQuestions[randomIndex];

            // 更新UI显示问题
            displayQuestion(currentQuestion);

            // 确保答案部分隐藏
            answerSection.classList.add('hidden');
            hideAnswerBtn.classList.add('hidden');
            showAnswerBtn.classList.remove('hidden');
        }

        // 显示问题
        function displayQuestion(question) {
            questionNumber.textContent = `题目 #${question.id}`;

            // 处理问题内容中的代码块
            let questionHtml = processCodeBlocks(question.question);
            questionHtml = questionHtml.replace(/\n/g, '<br>');
            questionContent.innerHTML = questionHtml;

            // 处理答案内容中的代码块
            let answerHtml = processCodeBlocks(question.answer);
            answerHtml = answerHtml.replace(/\n/g, '<br>');
            answerContent.innerHTML = answerHtml;

            // 高亮代码
            document.querySelectorAll('pre code').forEach((block) => {
                hljs.highlightElement(block);
            });
        }

        // 显示答案
        function showAnswer() {
            answerSection.classList.remove('hidden');
            showAnswerBtn.classList.add('hidden');
            hideAnswerBtn.classList.remove('hidden');

            // 增加已回答计数
            if (!answeredQuestions.has(currentQuestion.id)) {
                answeredCount++;
                answeredQuestions.add(currentQuestion.id);
                updateStats();
            }
        }

        // 隐藏答案
        function hideAnswer() {
            answerSection.classList.add('hidden');
            hideAnswerBtn.classList.add('hidden');
            showAnswerBtn.classList.remove('hidden');
        }

        // 更新统计信息
        function updateStats() {
            answeredEl.textContent = answeredCount;
        }

        // 初始化应用
        document.addEventListener('DOMContentLoaded', function () {
            init();
        });
    </script>
</body>

</html>